<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <ul class="select-ul" v-if="list.length">
        <li class="select-li-items" v-for="(item,index) in list" :key="index" @click="goLeave(item.goods_id, item.goods_name, item.campus_address, item.teacher_name, item.sub_order_id)">
          {{item.goods_name}}
          <van-icon name="arrow" color="#BEC2CD" />
        </li>
      </ul>
      <div v-else class="empty">
        <img src="/static/images/empty-icon.png" alt="空">
        <p class="empty-tips">暂时还没有可请假班级哦</p>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import Ls from '@/utils/storage'
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      isBottom: false, // 是否加载完全部数据
      list: []
    }
  },
  onShow() {
    this.getLeaveClass();
    Ls.removeItem("sureList"); // 清空缓存中的sureList（班级可请假课次），这里这样做是因为接下来的业务需要
  },
  methods: {
    // 获取列表
    getLeaveClass() {
      let that = this;
      wx.showNavigationBarLoading() //在标题栏中显示加载
      this.$fetch.getLeaveClass()
      .then(res=>{
        wx.hideNavigationBarLoading() //完成停止加载
        this.initLoading = false;
        this.list = res.result.data;
      }).catch(err=>{
        console.log(err)
        wx.hideNavigationBarLoading() //完成停止加载
        wx.showToast({
          title: err.code_user_msg || err.code_msg,
          icon: 'none'
        })
      })
    },
    // 去补课
    goLeave(goods_id, goods_name, campus_address, teacher_name, sub_order_id) {
      wx.navigateTo({
        url: `/pages/classleave/main?goods_id=${goods_id}&goods_name=${goods_name}&campus_address=${campus_address}&teacher_name=${teacher_name}&sub_order_id=${sub_order_id}`
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  .select-ul {
    width: 100%;
    padding: 18px 16px;
    box-sizing: border-box;
    overflow: hidden;

    .select-li-items {
      width: 100%;
      padding: 16px 14px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 2px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
      color: #333;
      &.empty{
        height: 200px;
        justify-content: center;;
        align-items: center;
      }
      .title{
        font-size: 14px;
        color: #333;
        font-weight: 400;
        span{
          display: inline-block;
          font-size: 12px;
          color: #999;
          margin-top: 6px;
        }
      }
      .select-btn{
        display: inline-block;
        width: 62px;
        line-height: 22px;
        border-radius: 10px;
        color: #fff;
        text-align: center;
        font-size: 12px;
        transition: all .5s;
        &.on{
          background: #fff !important;
          transition: all .5s;
        }
      }
      .selected-btn{
        display: inline-block;
        width: 62px;
        line-height: 22px;
        border-radius: 10px;
        color: #fff;
        text-align: center;
        font-size: 12px;
        transition: all .5s;
        &.on{
          background: #fff !important;
          transition: all .5s;
        }
      }
    }
  }
}
</style>
